<template>
	<!-- 服务订购 -->
	<view>
		<!-- banner -->
		<u-swiper :list="banner" circular class="" height="380" mode="rect"></u-swiper>
		
		<!-- 分类 -->
		<view class="classfiy">
			<view v-for="(item,index) in serve" :key='index'
				:class="classifyActive == index?'active':''"
				@click="C_classify(index)"
			>{{item.name}}</view>
		</view>
		
		<!-- 标题 -->
		<view class="title"> {{title}} </view>
		
		<!-- 四宫格 -->
		<view class="gong">
			<view v-for="(item,index) in gong" :key='index'>
				<view class="tit">{{item.title}}</view>
				<view class="cont">{{item.msg}}</view>
			</view>
		</view>
		
		<!-- 富文本 -->
		<!-- <rich-text :nodes="richText"></rich-text> -->
		<view class="richText" v-html='richText'></view>
		<!-- 底部 -->
		<view class="bottom">
			<text>合计:</text>
			<text class="price">￥{{price}}</text>
			<text class="submit" @click="C_submit">立即订购</text>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				banner: [],
				serve:[],
				classifyActive:0,
				title:'',
				price:'',
				richText:'',
				
				gong:[]
			}
		},
		onLoad() {
			// let url = this.vuex_httpImageUrl;
			// this.gong=[
			// 	{
			// 		title:'准',
			// 		msg:'这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容',
			// 	},
			// 	{
			// 		title:'快',
			// 		msg:'这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容',
			// 	},
			// 	{
			// 		title:'全',
			// 		msg:'这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容',
			// 	},
			// 	{
			// 		title:'安',
			// 		msg:'这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容',
			// 	},
			// ]
		},
		onShow(){
			this.def_banner()
			this.def_db()
		},
		methods:{
			C_submit(){
				this.$u.post('/appuser/myinfo').then(res=>{
					if(!res.data.name){
						uni.showModal({
							title:'提示',
							content:'购买功能需要先绑定个人信息',
							success:res=>{
								if(res.confirm){
									uni.navigateTo({
										url:'/pages/my/edit/edit'
									})
								}
							}
						})
						return 
					}
					uni.login({
						success:res=>{
							this.$u.post('/wxpay/serve_record',{
								serve_id:this.serve[this.classifyActive].id,
								phone_status:'wechat',
								code:res.code
							}).then(res=>{
								uni.requestPayment({
									provider:"wxpay",
									timeStamp:res.data.timeStamp,
									nonceStr:res.data.nonceStr,
									package:res.data.package,
									signType:res.data.signType,
									paySign:res.data.paySign,
									success:res=>{
										console.log(res,'cascsa');
										this.$u.toast('支付成功')
										setTimeout(_=>{
											uni.navigateBack()
										},700)
									},
									fail:err=>{
										console.log(err,'err');
										this.$u.toast('取消支付')
									}
								})
							})
						}
					})
				})
				
			},
			async def_db(){
				let serve = await this.$u.api.indexserve()
				console.log(serve.data);
				this.serve = serve.data
				this.title = serve.data[0].name
				this.price = serve.data[0].price
				this.richText = serve.data[0].content
			},
			async def_banner(){
				let banner = await this.$u.api.indexserve_nav()
				this.banner = banner.data
			},
			C_classify(index){
				this.classifyActive = index
				this.title = this.serve[index].name
				this.price = this.serve[index].price
				this.richText = this.serve[index].content
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #FFFFFF;
		padding-bottom: 125rpx;
		.classfiy{
			width: 90%;
			height: 390rpx;
			margin: 30rpx auto;
			padding: 50rpx;
			background-image: url($http-image-url+'/static/index/serveBuy.png');
			background-repeat: no-repeat;
			background-size:100%;
			display: grid;
			grid-template-columns:repeat(2,1fr);
			grid-gap:20rpx;
			>view{
				display: inline-block;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #FFFFFF;
				border-radius: 50rpx;
				border: 1px solid #FFFFFF;
				white-space: nowrap;
				overflow-x: scroll;
				overflow-y: hidden;
				&.active{
					border: 1px solid #3164E8;
					color: #3164E8;
				}
			}
		}
	
		.title{
			width: 60%;
			height: 75rpx;
			line-height: 75rpx;
			// border: 1px solid red;
			text-align: center;
			margin: auto;
			background-image: url($http-image-url+"static/common/servesubhr.png");
			background-size: 100%;
			background-repeat: no-repeat;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	
		.gong{
			width: 90%;
			margin: auto;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-gap:20rpx;
			font-weight: bold;
			.tit{
				color: #1B80F2;
			}
			.cont{
				overflow: hidden; /*文本超出隐藏*/
				display:-webkit-box; /*盒子模型微弹性伸缩模型*/
				-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
				-webkit-line-clamp: 3; /*文本显示3行*/
			}
		}

		.richText{
			width: 90%;
			margin: auto;
			display: -webkit-box;
			overflow: hidden;
		}
		
		.bottom{
			width: 100%;
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			padding: 20rpx;;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			border-top: 1px solid #F1F1F1;
			.price{
				color: #FE0102;
				font-weight: bold;
			}
			.submit{
				display: inline-block;
				width: 180rpx;
				text-align: center;
				padding: 15rpx 0;
				margin: 0;
				margin-left: 20rpx;
			}
		}
	}
</style>